<template>
  <div>
    <div class="demo-inner-divider">AutoComplete 输入框</div>
    <div class="explainText">基础用法:<span>通过 data 设置自动完成的数据源</span></div>
    <div class="auto-complete">
      <e-auto-complete
        style="width: 200px"
        transfer
        clearable
        placeholder="input here"
        v-model="value1"
        :data="data1"
        @on-search="handleSearch1"
        @on-select="handleSelect"
      ></e-auto-complete>
    </div>
    <div class="explainText">自定义用法:<span>直接传入 Option 组件作为 slot 使用，这样可以自定义显示效果</span></div>
    <div class="auto-complete">
      <e-auto-complete
        style="width: 200px"
        transfer
        clearable
        placeholder="input here"
        v-model="value2"
        @on-search="handleSearch2"
        @on-select="handleSelect"
      >
        <e-option v-for="item in data2" :value="item" :key="item">{{
          item
        }}</e-option>
      </e-auto-complete>
    </div>
    <div class="explainText">高亮显示匹配到的关键词</div>
    <div class="auto-complete">
      <e-auto-complete
        style="width: 200px"
        highlight
        clearable
        placeholder="input here"
        v-model="value3"
        :data="data3"
        @on-select="handleSelect"
      >
      </e-auto-complete>
    </div>
    <div class="explainText">置灰不可选的选项：<span>data属性设置为disabled</span></div>
    <div class="auto-complete">
      <e-auto-complete
        style="width: 200px"
        clearable
        highlight
        placeholder="input here"
        v-model="value4"
        :default-value="defaultValue4"
        :data="data4"
        @on-select="handleSelect"
      >
      </e-auto-complete>
    </div>

    <div class="explainText">自定义过滤用法:<span>不区分大小写</span></div>
    <div class="auto-complete">
      <e-auto-complete
        style="width: 200px"
        clearable
        placeholder="input here"
        v-model="value5"
        :data="data5"
        :filter-method="filterMethod"
        @on-select="handleSelect"
      >
      </e-auto-complete>
    </div>

    <div class="explainText">自定义用法:<span>自定义Option，显示复杂的布局</span></div>
    <div class="auto-complete">
      <e-auto-complete
        style="width:300px"
        icon="search"
        placeholder="input here"
        v-model="value6"
        :default-value="defaultValue6"
        @on-select="handleSelect"
      >
        <div
          class="demo-auto-complete-item"
          v-for="(item, index) in data6"
          :key="index"
        >
          <div class="demo-auto-complete-group">
            <span>{{ item.title }}</span>
            <a href="https://www.google.com/search?q=iView" target="_blank">更多</a>
          </div>
          <e-option
            v-for="option in item.children"
            :value="option.title"
            :key="option.title"
          >
            <span class="demo-auto-complete-title">{{ option.title }}</span>
            <span class="demo-auto-complete-count">{{ option.count }} 人关注</span>
          </e-option>
        </div>
        <a href="https://www.google.com/search?q=iView" target="_blank" class="demo-auto-complete-more">查看所有结果</a>
      </e-auto-complete>
    </div>

    <div class="explainText">懒加载：<span>同时设置4个属性：enabled-lazy-load、loading、is-error、is-finished，2个事件：on-search（输入内容改变触发）、on-load-more （滚动条滚动到底触发）</span></div>
    <div class="auto-complete">
      <e-auto-complete
        style="width: 200px"
        enabled-lazy-load
        transfer
        clearable
        placeholder="input here"
        v-model="value7"
        :data="data7"
        :loading="loading"
        :is-error="isError"
        :is-finished="isFinished"
        @on-search="debounceSearch"
        @on-load-more="handleloadMore"
        @on-select="handleSelect"
      ></e-auto-complete>
    </div>
    <div class="explainText">懒加载+自定义Option</div>
    <div class="auto-complete">
      <e-auto-complete
        style="width: 200px"
        enabled-lazy-load
        transfer
        clearable
        placeholder="input here"
        v-model="value8"
        :loading="loading2"
        :is-error="isError2"
        :is-finished="isFinished2"
        @on-search="debounceSearch2"
        @on-load-more="handleloadMore2"
        @on-select="handleSelect"
      >
        <e-option
          v-for="option in data8"
          :label="option.title"
          :value="option.value"
          :key="option.title"
        >
          <div class="demo-auto-complete-content">
            <div class="demo-auto-complete-title">{{ option.title }}</div>
            <div class="demo-auto-complete-detail">{{ option.code }}人</div>
          </div>
        </e-option>
      </e-auto-complete>
    </div>
    <autoComplete-md class="markdown-body"></autoComplete-md>
  </div>
</template>
<script>
import autoCompleteMd from '../../docs/autoComplete.md'
import { debounce } from '../../src/utils/assist'

export default {
  name: 'DemoAutoComplete',
  components: {
    autoCompleteMd,
  },
  data() {
    return {
      value1: '',
      data1: [],

      value2: '',
      data2: [],

      value3: '',
      data3: [
        {
          label: 'nihao', 
          value: 1,
        },
        {
          label: '北京', 
          value: 2
        },
        {
          label: '1', 
          value: 3
        },
        {
          label: '/1 1$s人 A，D,F[]t|yl]e2/2\\x x .xx\/a\.a\\a\[a\]a\(a\)a\{a\}a\+a\|a\?a\$a\^a\*a', 
          value: 4,
        },
        {
          label: '<span style="color: #337DFF;">\$1<\/span>',
          value: 5
        },
        {
          label: '<p>abc<\/p>',
          value: 6
        },
      ],

      // value4: '13',
      // defaultValue4: '13',
      // data4: ['11', '12', '13', '113'],
      
      // value4: 12,
      // defaultValue4: 12,
      // data4: [11, 12, 13],

      // value4: 'Steve Jobs',
      // defaultValue4: 1,
      value4: '',
      defaultValue4: '',
      data4: [
        {
          label: 'Steve Jobs', 
          value: 1,
        },
        {
          label: 'Stephen Gary Wozniak', 
          value: 2,
          disabled: true,
        },
        {
          label: 'Jonathan Paul Ive', 
          value: 3,
        }
      ],

      value5: '',
      data5: [
        {
          label: 'hello', 
          value: '1', 
        },
        {
          label: 'nihao', 
          value: '2', 
        },
        {
          label: 'hi', 
          value: '3'
        }
      ],

      value6: 'View UI Plus',
      defaultValue6: 'View UI Plus',
      data6: [
        {
          title: '话题',
          children: [
            {
              title: 'View UI',
              count: 10000,
            },
            {
              title: 'View UI Plus',
              count: 10600,
            }
          ]
        },
        {
          title: '问题',
          children: [
            {
              title: 'View UI Plus 有多好',
              count: 60100,
            },
            {
              title: 'View UI Plus 是啥',
              count: 30010,
            }
          ]
        },
        {
          title: '文章',
          children: [
            {
              title: 'View UI Plus 是一个设计语言',
              count: 100000,
            }
          ]
        }
      ],

      value7: '',
      data7: [],
      loading: false,
      isError: false,
      isFinished: false,
      index: 0,
      debounceSearch: debounce((event) => {
        this.handleSearch4(event)
      }, 1000),


      value8: '',
      data8: [],
      loading2: false,
      isError2: false,
      isFinished2: false,
      index2: 0,
      debounceSearch2: debounce((event) => {
        this.handleSearch5(event)
      }, 1000),
    }
  },
  methods: {
    handleSearch1(value) {
      this.data1 = !value ? [] : [ value, value + value, value + value + value]
    },
    handleSearch2(value) {
      this.data2 =
        !value || value.indexOf('@') >= 0
          ? []
          : [value + '@qq.com', value + '@sina.com', value + '@163.com']
    },
    handleSelect(value) {
      console.log('select：', value)
      console.log(typeof value)
    },
    handleSearch4(value) {
      this.loading = true
      this.isError = false
      this.isFinished = false
      const query = value
      setTimeout(() => {
        if (this.index === 2) {
          this.loading = false
          this.isError = true
          this.index ++
          this.$Message.error({
            content: '请求失败',
            duration: 3,
            background: true
          });
          return
        }

        const start = this.index * 10 + 1
        const end = ++this.index * 10
        const array = Array.from({length: end - start + 1}, (_, i) => (
          {
            label: query + (start + i),
            value: start + i
          }
        ))
        this.data7 = [...this.data7, ...array]
        this.loading = false
        this.isError = false
        if (this.index >= 6) {
          this.isFinished = true
        }
      }, 500)
    },
    handleSearch5(value) {
      this.isError2 = false
      this.isFinished2 = false
      const query = value
      if (query) {
        this.loading2 = true
        setTimeout(() => {
          const start = this.index2 * 10 + 1
          const end = ++this.index2 * 10
          const array = Array.from({length: end - start + 1}, (_, i) => (
            {
              title: query + (start + i),
              code: start + i + 1,
              value: start + i
            }
          ))
          this.data8 = [...this.data8, ...array]
          this.loading2 = false
          this.isError2 = false
          if (this.index2 >= 3) {
            this.isFinished2 = true
          }
        }, 1000)
      } else {
        this.data8 = []
      }
    },
    handleloadMore(value) {
      this.handleSearch4(value)
    },
    handleloadMore2(value) {
      this.handleSearch5(value)
    },
    filterMethod(value, option) {
      return option.label.toUpperCase().indexOf(value.toUpperCase()) !== -1
    },
    filterMethod2(value, option) {
      return option.toUpperCase().indexOf(value.toUpperCase()) !== -1
    },
  },
  mounted() {
    this.handleSearch4('')
  }
}
</script>

<style lang="less">
  .auto-complete {
    display: flex;
    flex-direction: row;
    margin-bottom: 30px;
  }
  .explainText{
    display: flex;
    font-size: 14px;
    color:#9013FE;
    margin: 10px 0px;
  }
  .explainText > span{
    font-size: 14px;
    color:#6F7D96;
    padding-left:10px;
  }

  .demo-auto-complete-item {
    padding: 4px 0;
    border-bottom: 1px solid #F6F6F6;
    .demo-auto-complete-group {
      font-size: 12px;
      padding: 4px 6px;
    }
    .demo-auto-complete-group span {
      color: #666;
      font-weight: bold;
    }
    .demo-auto-complete-group a {
      float: right;
    }
    .demo-auto-complete-count {
      float: right;
      color: #999;
    }
  }

  .demo-auto-complete-more {
    display: block;
    margin: 0 auto;
    padding: 4px;
    text-align: center;
    font-size: 12px;
  }

  .demo-auto-complete-content {
    display: flex;
    justify-content: space-between;
    .demo-auto-complete-detail {
      color: #999;
      margin-left: 10px;
    }
  }
</style>
